<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			input:focus{
				outline: none;
			}
			input.error{
				border: 2px solid red;
			}
			input.valid{
				border: 2px solid green;
			}
		</style>
	</head>
	<body>
		账号：<input id = "bor" type="text" oninput="validateInput()"/>
		<span class = "box">请输入6至12位字符</span>
		<br/><br/>
		密码：<input type="password"/>
	</body>
	<script>
		function validateInput() {
			var input = document.getElementById('bor');
			var box = document.getElementsByClassName("box")[0];
			if(input.value.length < 6 || input.value.length > 12) {
				input.classList.add('error');
				input.classList.remove('valid');
				box.innerText="请输入6至12位字符";
			} else {
				input.classList.remove('error');
				input.classList.add('valid');
				box.innerText="输入正确!";
			}
		}
	</script>
</html>
